<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>
</head>
<body>
    <div>
        <button>发送GET请求</button>
        <button>发送POST请求</button>
        <button>发送PUT请求</button>
        <button>发送DELETE请求</button>
    </div>

    <script>
        const btns=document.querySelectorAll('button');

        btns[0].onclick=function(){
            //发送axios请求
            axios({
                //请求类型
                method:'GET',
                //URL
                url:'http://localhost:3000/posts/1'
            }).then(response=>{
                console.log(response);
            });
        }

        btns[1].onclick=function(){
            //发送axios请求
            axios({
                //请求类型
                method:'POST',
                //URL
                url:'http://localhost:3000/posts',
                //设置请求体
                data:{
                    "title": "json-server3",
                    "author": "typicode" 
                }
            }).then(response=>{
                console.log(response);
            });
        }

        //更新数据
        btns[2].onclick=function(){
            //发送axios请求
            axios({
                //请求类型
                method:'PUT',
                //URL
                url:'http://localhost:3000/posts/3',
                //设置请求体
                data:{
                    "title": "json-server2",
                    "author": "张三" 
                }
            }).then(response=>{
                console.log(response);
            });
        }

        //删除数据
        btns[3].onclick=function(){
            //发送axios请求
            axios({
                //请求类型
                method:'DELECT',
                //URL
                url:'http://localhost:3000/posts/3'
            }).then(response=>{
                console.log(response);
            });
        }
    </script>
</body>
</html>
